<template>
<div>
      <div class="login-form">
        <div class="g-form">
          <div class="g-form-line">
            <span class="g-form-label"></span>
            <div class="g-form-input">
              <h1 class="title">用户注册</h1>
            </div>
          </div>
          <div style="height: 20px; width: 100%; clear: left;">
          </div>
          <div class="g-form-line">
            <span class="g-form-label"></span>
            <div class="g-form-input">
              <div class="ipt">
                <div class="lab">
                  用户名:
                </div>
                <input type="text" placeholder="请输入用户名" name="username" v-model="username" @blur="checkusername">
              </div>
              <p class="error_info red"  v-if="is_username">{{ error_msg_user }}</p>
            </div>
          </div>
          <div style="height: 20px; width: 100%; clear: left;">
          </div>
          <div class="g-form-line">
            <span class="g-form-label"></span>
            <div class="g-form-input">
              <div class="ipt">
                <div class="lab">
                  手机号:
                </div>
                <input type="text" placeholder="请输入手机号" name="phone" v-model="phone">
                <button @click="sendCode" :disabled="is_disabled" :class="{'gray':is_gray,'blue':is_blue}">{{ send_text }}</button>
              </div>
              <p class="error_info red"  v-if="is_phone">
                {{ error_msg_phone }}
              </p>
            </div>
          </div>
          <div style="height: 20px; width: 100%; clear: left;">
          </div>
          <div class="g-form-line">
            <span class="g-form-label"></span>
            <div class="g-form-input">
              <div class="ipt">
                <div class="lab">
                  验证码:
                </div>
                <input type="text" placeholder="请输入验证码" name="verification" v-model="verification" @blur="checkcode" >
              </div>
              <p class="error_info red"  v-if="is_verification">
                {{ error_msg_code }}
              </p>
            </div>
          </div>
          <div style="height: 20px; width: 100%; clear: left;">
          </div>
          <div class="g-form-line">
            <span class="g-form-label"></span>
            <div class="g-form-input">
              <div class="ipt">
                <div class="lab">
                  密码:
                </div>
                <input type="password" placeholder="请输入密码" name="password" v-model="password">
              </div>
              <p class="error_info red"  v-if="is_password">
              {{ error_msg_pass }}
              </p>
            </div>
          </div>
          <div style="height: 20px; width: 100%; clear: left;">
          </div>
          <div class="g-form-line">
            <span class="g-form-label"></span>
            <div class="g-form-input">
              <div class="ipt">
                <div class="lab">
                  重复密码:
                </div>
                <input type="password" placeholder="请再次输入密码" name="repass" v-model="repass">
              </div>
              <p class="error_info red"  v-if="is_repass">
               {{ error_msg_repass }}
              </p>
            </div>
          </div>
          <div style="height: 20px; width: 100%; clear: left;">
          </div>
          <div class="g-form-line">
            <div class="g-form-btn">
              <div class="ipt">
                <div class="btn" @click="reg" src="javascript:;" >注册</div>
              </div>
            </div>
          </div>
        </div>
      </div>


</div>
</template>

<script>
export default {
  props: {

  },
  watch:{
    username(){
        let reg = /[0-9A-Za-z_]{6,}/;
        
        if(reg.test(this.username) == false){
           this.is_username =  true;
           this.error_msg_user = '用户名至少六位且不包含非法字符！';
        }else{
          this.is_username = false;
          this.error_msg_user = '';
        }
    },
    phone(){
       let reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if(reg.test(this.phone) == false){
           this.is_phone =  true;
           this.error_msg_phone = '手机号错误';
        }else{
          this.is_phone = false;
          this.error_msg_phone = '';
        }
    },
    password(){
       let reg = /\S{6,}$/;
        if(reg.test(this.password) == false){
           this.is_password =  true;
           this.error_msg_pass = '密码过于简单';
        }else{
          this.is_password = false;
          this.error_msg_pass = '';
        }
    },
    repass(){
        if(this.repass !== this.password ){
           this.is_repass =  true;
           this.error_msg_repass = '两次密码不一致';
        }else{
          this.is_repass = false;
          this.error_msg_repass = '';
        }
    }
  },
  data () {
    return {
      error_msg_user:'',
      error_msg_phone:'',
      error_msg_code:'',
      error_msg_pass:'',
      error_msg_repass:'',
      is_phone:false,
      is_username:false,
      is_password:false,
      is_repass:false,
      is_verification:false,
      username:'',
      password:'',
      repass:'',
      phone:'',
      clock:'',
      time:60,
      is_gray:false,
      is_blue:true,
      is_disabled:false,
      send_text:'发送验证码',
      verification:''
    }
  },
  methods: {
    checkusername(){
        var that=this;
        that.$http({
            method:'GET',
            url:'./checkusername/'+this.username,
        }).then(function(data){
            if(data.body.status == 1){
              this.is_username=true;
              this.error_msg_user = data.body.info;
            }else{
             this.is_username=false;
              this.error_msg_user = ''; 
            }
        },function(error){
           console.log(error);
        })
    },
    checkcode(){
        var that=this;
        that.$http({
            method:'GET',
            url:'./checkcode/'+this.verification,
        }).then(function(data){
            if(data.body.status == 1){
              this.is_verification = true;
              this.error_msg_code = data.body.info;
            }else{
              this.is_verification = false;
              this.error_msg_code = ''; 
            }
        },function(error){
           console.log(error);
        })
    },
    closeMyself (data) {
        this.$emit('reg-log', data)
    },
    sendCode(){
      let reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if(reg.test(this.phone) == false){
           this.is_phone =  true;
           this.error_msg_phone = '手机号错误';
           return;
        } 
      var that=this;
      that.$http({
          method:'GET',
          url:'./sendCode?tel='+this.phone,
      }).then(function(data){
        console.log(data);
          if(data.body.status ==1 ){
              this.clock = setInterval(this.time_down,1000);
          }
      },function(error){
         console.log(error);
      })
    },
    time_down(){
      this.time--;
      if(this.time <=0){
          this.is_gray=false;
          this.is_blue=true;
          this.is_disabled=false;
          this.send_text='发送验证码';
          clearInterval(this.clock);
          this.time =60 ;
      }else{
          this.is_gray=true;
          this.is_blue=false;
          this.is_disabled=true;
          this.send_text=this.time + 's秒后重新发送';
      }
    },

    reg(){
      var that=this;
        this.$http.post("./register",
          {
            userinfo:{
              username:this.username,
              password:this.password,
              phone:this.phone,
              verification:this.verification,
              repass:this.repass
            }
          },
          {emulateJSON:true}
        ).then(response=>{
            if(response.body.status == 0){
                alert('注册成功');
                this.closeMyself(response.body.info);
            }else{
              alert(response.body.info);
            }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gray{
  color:white;
  background-color:gray;
  border: 1px solid gray;
}
.blue{
  color:white;
  background-color: #1E9FFF;
  border: 1px solid #1E9FFF;
}
.title{
  width: 100%;
  text-align: center;
  font:bold 25px/40px '\5FAE\8F6F\96C5\9ED1';
  color:#1E9FFF;

}
.ipt{
  width: 60%;
  margin-left: 20%;
  float: left;
}
.error_info{
  width: 60%;
  margin-left: 20%;
  float: left;
  text-align: center;
  font:18px/25px '\4EFF\5B8B';
  margin-top: 10px;

}
.red{
  color:red;
}
.ipt .lab{
  float:left;
  font:18px/30px '\5FAE\8F6F\96C5\9ED1';
  color:#666;
  width: 27%;
  margin-right: 1%;
  text-align: center;
}
.ipt input[data-v-80ad9e94]{
  float: left;
  height: 28px;
  width: 70%;
}
.ipt input[name='phone']{
  float: left;
  height: 28px;
  width: 35%;

}
button{
  float: right;
  height: 32px;
  width:32%;
  text-align: center;
  font-size: 12px
}

.ipt .btn{
  float: none;
  margin-left: 6%;
  height: 40px;
  font:22px/40px '\5FAE\8F6F\96C5\9ED1';
  color:white;
  background-color: #1E9FFF;
  border: 1px solid #1E9FFF;
  width: 90%;
  text-align: center;
}
</style>
